<template>
  <div class="app-container" style="margin:0 0 20px 20px;">
    <el-upload class="upload-demo"  ref="myUpload" action ="" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" style="width:600px;">
        <el-button slot="trigger"  type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
    </el-upload>
     <!-- <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleChange"> -->
     <el-button utton :loading="downloadLoading"  type="primary" icon="document" @click="handleDownload" style="margin:0 50px 0 0">{{ $t('excel.export') }} Excel</el-button>
  </div>

</template>

<script>
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import { uploadList, downLoadFile, downLoadFile2 } from "@/api/transaction";
export default {
  name: "MyUploadExcel",
  components: { UploadExcelComponent },
  data() {
    return {
      fileList: [],
      downloadLoading: false,
      uploadPath: uploadList,
      uploadFiles: []
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.uploadFiles = fileList;
      console.log("handleChange", this.uploadFiles);
    },
    handleSuccess({ results, header }) {
      console.log("handleSuccess", results, header);
    },
    beforeUpload(file) {
      console.log("beforeUpload", file);
    },
    submitUpload(file, id) {
      this.uploadFiles.forEach((item, b, c) => {
        let formdata = new FormData();
        formdata.append("file", item.raw);
        uploadList(formdata).then(res => {
          if (res.statusText == "OK") {
            this.$message({
              showClose: true,
              message: "文件上传成功",
              type: "success"
            });
          }
        });
      });
    },
    handleRemove(file, fileList) {
      console.log("handleRemove", file, fileList);
    },
    handleDownload() {
      this.downloadLoading = true;
      downLoadFile().then(res => {
        this.$message({
          showClose: true,
          message: "文件下载成功",
          type: "success"
        });
      });
      this.downloadLoading = false;
    }
  }
};
</script>
